<template>
	<div>
		<el-dialog title="转给TA人" :visible.sync="dialogVisible" :close-on-click-modal="false" width="700px" center @close="cancelClick">
			<div class="other-page">
				<div class="search-box flex f-mi f-be">
					<div>
						<el-select v-model="branchId" placeholder="请选择">
							<el-option v-for="item in depList" :key="item.branch_id" :label="item.branch_title" :value="item.branch_id" @change="departChange(item)">
							</el-option>
						</el-select>
					</div>
					<div>
						<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="keywords"></el-input>
					</div>
					<div class="flex f-mi">
						<el-button class="btn bg-blue" @click="queryClick">查询</el-button>
					    <el-button class="btn bg-gray" @click="resetClick">重置</el-button>
					</div>
				</div>
				<div class="other-list" v-if="dataList.length > 0">
					<div class="other-box f-be" :class="activeIndex === item.uid ? 'active-bor':''" v-for="(item,index) in dataList" :key="index" @click="activeClick(item)">
						<div class="flex left">
							<div class="pic">
								<img :src="item.profile"/>
							</div>
							<div class="pad-L1">
								<div style="margin-bottom: 5rpx;">
									<span class="fs-16">{{item.name}}</span>
									<span class="t-eight">（{{item.branch}}）</span>
								</div>
								<div class="">
									<img style="width: 22rpx;" src="../assets/images/phone-icon.png" />
									<span style="color: #2A82E4;">{{item.phone}}</span>
								</div>
							</div>
						</div>
						<div class="right">
							<div class="fs-13 fw-7 t-cen" style="color: #FF5733;">
								{{item.money}}
							</div>
							<div class="t-eight fs-13">
								积分
							</div>
						</div>
					</div>
				</div>
				<div class="t-cen no-data" v-else>
					<img class="w-90" src="../assets/images/no-data.png" alt="">
					<p>暂无数据</p>
				</div>
				<div class="page" v-if="total >= 10">
					<el-pagination
						background
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page.sync="currentPage"
						:page-size="pageSize"
						layout="prev,pager,next,total"
						:total="total">
					</el-pagination>
				</div>
				<div class="btn-box" v-if="dataList.length > 0">
					<el-button class="btn gray" type="primary" @click="cancelClick">取消</el-button>
					<el-button class="btn b-bg" type="primary" @click="sureClick">确认</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import {request} from "../assets/js/utils/request";
export default {
    props: ['isTrans','depList','dataInfo'],
    data() {
        return {
            dialogVisible: false,
            keywords: '',
            depart: '',
			dataList: [],
			branchId: '',
			activeIndex: '',
			intergralVisible: false,
			currentPage: 1,
			pageSize: 10,
			total: 0,
			money: ''
        }
    },
	created() {
		this.getListData()
	},
    methods: {
		handleSizeChange(val) {
            this.pageSize = val
            this.currentPage = 1
            this.getListData()
        },
		// 切换页码
        handleCurrentChange(val) {
            this.currentPage = val
            this.getListData()
        },
		resetClick() {
			this.keywords = ''
			this.branchId = ''
			this.getListData()
		},
		queryClick() {
			this.getListData()
		},
        departChange(params) {
			this.branchId = params.branch_id
			this.getListData()
        },
		comfirmClick() {
			const formData = new FormData();
			formData.append('to_uid',this.integralData.uid);
			formData.append('money',this.money)
			request({
				url: `/user/money/transfer`,
				method: 'POST',
				data: formData
			}).then(res => {
				if(res.code == 200) {
					this.dataList = res.data.list || []
				}
			})
		},
		activeClick(item) {
			this.activeIndex = item.uid
			this.selectUid = item.uid
			this.$emit('intergralOther',item)
		},
		getListData() {
			let getUrl = `/user/lawyer/list?page=${this.currentPage}&keywords=${this.keywords}`
			if(this.branchId) {
			    getUrl += `&branch_id=${this.branchId}`
			}
			request({
				url: getUrl,
				method: 'GET'
			}).then(res => {
				if(res.code == 200) {
					this.dataList = res.data.list || []
					this.total = res.data.quantity
				}
			})
		},
		cancelClick() {
			this.dialogVis = false
			this.$emit('transferClose')
		},
		sureClick() {
			const formData = new FormData();
			formData.append('buy_id', this.buyId);
			formData.append('to_uid', this.selectUid)
			request({
				url: '/user/clue/shift',
				method: 'POST',
				data: formData
			}).then(res => {
				if(res.code == 200) {
					this.dialogVis = false
					this.$emit('transferSure')
					this.$message({
						message: '成功',
						type: 'success'
					})
				} else{
					this.$message({
					    message: res.message,
					    type: 'error'
					});
				}
			})
		}
    }, 
    watch: {
        isTrans(newVal) {
            this.dialogVisible = newVal
            this.detail = this.dataInfo
			this.activeIndex = ''
			// 刷新数据
			this.getListData()
        }
    }
}
</script>
<style lang="less" scoped>
	.other-page{
		width: 100%;
		.search-box{
			padding: 10px;
			width: 100%;
			height: 50px;
			position: relative;
			background: #fff;
			.search-icon{
				position: absolute;
				top: 5px;
				left: 7px;
			}
			.inspan{
				width: 100%;
				height: 74rpx;
				padding-left: 40px;
				border: 2rpx solid #ddd;
				border-radius: 40rpx;
				// border-top-left-radius: 20px;
				// border-bottom-left-radius: 20px;
			}
			.btn{
				padding: 0;
				width: 80px;
				height: 40px;
				border: none;
			}
			.bg-blue {
				color: #ffffff;
				background: #2967E3;
			}
			.bg-gray{
			    color: #000;
			    border: 1px solid #ddd;
			    background: #fff;
			}
		}
		.no-data{
			padding-top: 30px;
			min-height: 300px;
			line-height: 30px;
		}
		.other-list{
			padding: 10px;
			min-height: 500px;
			height: auto;
			// overflow-y: auto;
		}
		.other-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			padding: 15px;
			border-radius: 6px;
			background: rgba(255, 255, 255, 1);
			border: 1px solid rgba(229, 229, 229, 1);
			margin-bottom: 8px;
			.right{
				padding-left: 10px;
				.bor-R{
					text-align: center;
					flex: 1;
					border-left: 1px solid #E5E5E5;
				}
			}
			.pic{
				img{
					width: 40px;
					height: 40px;
					border-radius: 50%;
				}
			}
			.more-box{
				position: absolute;
				right: 12px;
				top: 3px;
				img{
					width: 2px;
				}
			}
			.pop-box{
				position: absolute;
				right: 12px;
				top: 9px;
				width: 94px;
				padding: 10px;
				background: #fff;
				border-radius: 5px;
				box-shadow: 1px 2px 3px #737373;
				z-index: 100;
				.t{
					width: 100%;
					text-align: left;
					color: #000;
					padding: 10px;
					img{
						width: 40rpx;
						height: 40rpx;
						position: relative;
						top: 12rpx;
						margin-right: 10px;
					}
				}
			}
		}
		.active-bor{
			border-color: #2967E3;
		}
	}
	.btn-box{
		text-align: right;
		.btn{
			font-size: 14px;
			padding: 0;
			color: #fff;
			width: 96px;
			height: 28px;
			text-align: center;
			line-height: 28px;
			border: none;
			border-radius: 25px;
		}
		.b-bg{
			background: #2967E3;
		}
		.l-bg{
			background: #00BAAD;
		}
		.gray{
			background: #A6A6A6;
		}
	}
    /deep/.el-dialog{
        border-radius: 15px;
    }
</style>